<template>
	<div class="tab-bar-item" @click="itemClick">
		<div v-if="!isActive">
			<slot name="item-icon"></slot>
		</div>
		<div v-else>
			<slot  name="item-icon-active"></slot>
		</div>
		<div :style="activeStyle">
			<slot name="item-text"></slot>
		</div>
	</div>
</template>

<script>
	export default {
	  name: 'TabBarItem',
	  props:{
		path: String,
		activeColor:{
			type: String,
			default: 'red'
		}
	  },
	  data(){
		  return {
			  //isActive: false
		  }
	  },
	  computed:{
		  isActive(){
			  return (this.$route.path.indexOf(this.path) !== -1)
		  },
		  activeStyle(){
			  return this.isActive?{color:this.activeColor}:{}
		  }
	  },
	  methods:{
		  itemClick(){
			  this.$router.push(this.path)
		  }
	  }
	}
</script>

<style>
	.tab-bar-item {
		  flex: 1;
		  
		  height: 49px;
		  
		  font-size: 14px;  
	}
	
	.tab-bar-item img {  /* 设置图片大小 */
		width: 24px;
		height: 24px;
		
		margin-top: 3px; /* 设置图片与顶部有一定的外边距 */
		
		vertical-align: middle; /* 清除图片底部和文字之间的3px空隙 */
		margin-bottom: 2px;  /* 设置图片底部和文字之间有2px空隙 */
	}
	
	/* .active {
		color: red;
	} */
</style>
